<style lang="less" scoped>
.swiper-container {
  box-sizing: border-box;
  background: #fff;
  width: 100%;
  border-bottom: 0.005rem solid #ddd;
  .swiper-slide {
    height: 0.6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 0 0.7rem;
    text-align: center;
    background: #fff;
    border-bottom: 0.02rem solid transparent;
    .day {
      font-size: 0.13rem;
    }
    &.active {
      color: #fb6165;
      border-bottom: 0.02rem solid #fb6165;
    }
  }
}
</style>
<template>
  <div>
    <div id="dateSelect" class="swiper-container">
      <div class="swiper-wrapper">
        <div v-for="item in dateList" :key="item.id" class="swiper-slide am-ft-sm" :class="item.active">
          <div>{{item.weekdays}}</div>
          <div class="day">{{item.day}}</div>
        </div>
      </div>
    </div>
    <!-- <div class="am-loading am-loading-refresh" aria-label="加载中">
      <i class="am-icon loading" aria-hidden="true"></i>
      <div class="am-loading-text">加载中</div>
    </div> -->
    <adytum-list :goods="goods"></adytum-list>
  </div>
</template>

<script>
import Swiper from 'swiper';
import moment from 'moment';
import 'moment/locale/zh-cn';
import adytumList from '@/components/panes/adytum.list.vue';
import http from '@/services/xhr';
import apiSetting from '@/services/api';

export default {
  props: ['info'],
  data() {
    return {
      dateList: [],
      goods: []
    };
  },
  watch: {
    info: {
      handler(info) {
        this.init();
        this.swiperInit().setTranslate(0);
      },
      deep: true
    }
  },
  components: {
    adytumList
  },
  created() {
    this.init();
  },
  mounted() {
    let _that = this;
    this.swiperInit().on('tap', function() {
      // console.log(this.clickedIndex);
      // console.log(this.getTranslate());
      // this.setTranslate()
      _that.dateList.forEach((item, index) => {
        if (this.clickedIndex === index) {
          item.active = 'active';
        } else {
          item.active = '';
        }
      });
      _that.getGoods(this.clickedIndex);
    });
  },
  methods: {
    init() {
      this.dateList = [];
      for (let i = 0; i <= 28; i++) {
        let day = moment().add(i, 'days');
        let date = moment.weekdaysShort(day.day());
        let obj = {
          active: i === 0 ? 'active' : '',
          weekdays: date,
          day: day.format('MM-DD'),
          value: day.format('YYYY-MM-DD')
        };
        this.dateList.push(obj);
      }
      this.getGoods();
    },
    swiperInit() {
      var swiper = new Swiper('#dateSelect', {
        freeMode: true,
        freeModeMomentumRatio: 0.5,
        slidesPerView: 'auto'
      });
      return swiper;
    },
    getGoods(index) {
      index = index || this.info.title;
      let data = {
        index: index
      };
      http(apiSetting.getBookinglist, data).then(res => {
        this.goods = res.data.data.list;
      });
    }
  }
};
</script>